<template>
    <div class="portlet box blue">
        <div class="portlet-title">
            <div class="caption">
                <i class="fa fa-gift"></i>交易查询</div>
            <div class="tools">
                <a href="javascript:;" class="collapse" data-original-title="" title=""></a>
            </div>
        </div>
        <div class="portlet-body form">
            <!-- BEGIN FORM-->
            <form action="#" class="form-horizontal">
                <div class="form-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label col-md-3">支付单号</label>
                                <div class="col-md-9">
                                    <el-input placeholder="请输入您想查询的支付单号" v-model="condition.PayNo" clearable></el-input>
                                </div>
                            </div>
                        </div>
                      <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label col-md-3">创建日期</label>
                                <div class="col-md-9">
                                    <el-button icon="el-icon-caret-left" size="small" style="position: relative; top: -1px" :disabled="timestampRange == null" @click="prevDay()"></el-button>
                                    <el-date-picker v-model="timestampRange" value-format="yyyy-MM-dd" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" style="width:80%"></el-date-picker>
                                    <el-button icon="el-icon-caret-right" size="small" style="position: relative; top: -1px" :disabled="timestampRange == null" @click="nextDay()"></el-button>
                                </div>
                            </div> 
                        </div>
                    </div>  
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label col-md-3">交易类型</label>
                                <div class="col-md-9">
                                    <el-select v-model="condition.PayMethods" multiple placeholder="请选择交易类型" style="width:100%">
                                        <el-option key="ALIPAY" label="支付宝支付" value="ALIPAY"></el-option>
                                        <el-option key="WEIXIN" label="微信支付" value="WEIXIN"></el-option>
                                    </el-select>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label col-md-3">日志类型</label>
                                <div class="col-md-9">
                                   <el-select v-model="condition.LogTypes" multiple placeholder="请选择日志类型" style="width:100%">
                                        <el-option key="DEBUG" label="DEBUG" value="DEBUG"></el-option>
                                        <el-option key="INFO" label="INFO" value="INFO"></el-option>
                                        <el-option key="ERROR" label="ERROR" value="ERROR"></el-option>
                                        <el-option key="SUCCESS" label="SUCCESS" value="SUCCESS"></el-option>
                                        <el-option key="FAILED" label="FAILED" value="FAILED"></el-option>
                                    </el-select>
                                </div>
                            </div> 
                        </div>
                    </div>                  
                </div> 
                <div class="form-actions">
                    <div class="row">
                        <div class="col-md-12 pull-right">
                            <div style="float:right;">
                                <button type="button" class="btn green" @click="query()">查询交易日志</button>
                                <button type="button" class="btn default" @click="clear()">清空条件</button>
                            </div>
                        </div>
                    </div>
                </div>                               
            </form>
            <!-- END FORM-->
        </div>
    </div>
</template>

<script>

import moment from 'moment/src/moment.js';
import {GetPickerShortcuts} from 'web/utils.js';

export default {
    props: {
        'data': {
            type: Object,
            default: null
        },
    },
    data() {
        return {
            condition: { },
            timestampRange: null,
            pickerOptions: GetPickerShortcuts()
        }
    },
    watch: {
        'data': {
            handler: function(value){                
                this.condition = value;
                if(this.condition.AuditTime0 && this.condition.AuditTime1) {
                    this.timestampRange = [
                        this.condition.AuditTime0,
                        this.condition.AuditTime1
                    ];
                }
            },
            deep: true
        },
    },
    methods: {
        query() {
            // 将时间范围分解到condition中
            let _condition = Object.assign({}, this.condition);
            if (this.timestampRange) {
                _condition.AuditTime0 = this.timestampRange[0];
                _condition.AuditTime1 = this.timestampRange[1];
            }
            this.$emit('getCondition', _condition);
        }, 

        clear() {
            this.condition = {
                PayMethods: [],
                LogTypes: [],
                RandStr: null
            };
            this.timestampRange = null;
        },

        // 前一天
        prevDay() {
            this.timestampRange = [
                moment(this.timestampRange[0]).subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss'),
                moment(this.timestampRange[1]).subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss')
            ];
            this.query();
        },

        // 后一天
        nextDay() {
            this.timestampRange = [
                moment(this.timestampRange[0]).add(1, 'day').format('YYYY-MM-DD HH:mm:ss'),
                moment(this.timestampRange[1]).add(1, 'day').format('YYYY-MM-DD HH:mm:ss')
            ];
            this.query();
        }
    }
}
</script>

<style>

</style>
